ChartIQ SDK Legacy Documentation -

Using ChartIQ Within a Framework

Managing UI Elements: Menus, Dialogs,Widgets

The charting engine can be used with or without the supporting control GUI. The standard control GUI consists of several widgets:

  • Menus
  • Dialogs
  • Stock Lookup
  • Timezone Selector
  • Theme Manager
  • Drawing Toolbar

When integrating charts into a framework (such as Bootstrap or Angular) you may decide to use all, some or none of these widgets. For instance you may have your own menu structure but still wish to use the stock lookup widget. Since each of these widgets consists solely of HTML, CSS and JS componentry, you should be able to mix these components into your framework by including the standard CSS and JS files from the ChartIQ library, and cutting & pasting the required HTML componentry out of the sample pages (stx-standard.html).

Menus

Menus are the easiest component to replace. The menus in the standard chart implementation are pure HTML. Look for the "stxToggle" attribute in the sample implementation. This attribute contains the JavaScript that is used to execute that menu item. Simply call the same JavaScript using your own menus.

stxToggle="setChartType('candle')"

becomes

yourMenuSystem.callback=function(){ setChartType('candle');};

For most of the menu items in the standard demos there are global "proxy" functions which you should call. For instance:

function setChartType(type) {
   stxx.setChartType(type)
}

You can insert additional functionality into these functions if desired.

If you only have a single chart on your screen then using global proxies is probably the easiest way to build new menus. If you must manage multiple charts then you will need to derive an architecture to apply your menu item to the appropriate chart. Our recommendation would be to attach a reference to an stxx object to your menuing system and use closures.

To Iframe or Not To Iframe

The charting engine requires only a

tag to operate (see stx-quickstart.html). You can build all of your own GUI, however sometimes it is easier to simply place the sample code in an iframe and have an external menu system drive the iframe. This can easily be done simply by calling the same control functions described above except referenced by the iframe itself

$(iframeName).contentWindow.setChartType('candle');

Dialogs

The native charting dialogs are driven by the STXDialogManager object located in stx.js. The primary dialog is the study (indicator) configuration dialog. This HTML must exist in order for the dialogs to work properly (the existing dialog is a template that is filled in by STXStudies). You do not need to use the STXDialogManager however. You can use your own dialog management so long as the dialogs contain the same HTML.

Widgets

Widgets consist of the STXThemeManager, STXLookupWidget, STXTimezoneWidget, STXDrawingToolbar. These are interactive widgets that require HTML, CSS and JS componentry. In the standard demos, widgets are configured in the runSampleUI() function. These can be included in your framework with the following caveats:

The STXLookupWidget is attached to the input box with this code:

var stxLookupWidget=new STXLookupWidget(
{ input: $$$("symbol"),
  ...
});

So you can use the lookup widget simply by creating an input text box in your framework and attaching the widget to that input box.

The theme widget auto-updates the menu with user defined themes by calling STXThemeManager.themesToMenu(). Override this method to support your own menuing system.

The timezone widget depends on the #timezoneDialog existing. It populates the dialog with the available timezones so be sure to include this dialog in your framework.

The drawing toolbar depends on the HTML for the toolbar existing. Be sure to include the stx-toolbar html in order to utilize this feature.